<!doctype html>
<html lang="en">
<head>
    <title>hn_demo three.js 实现太阳系</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel=stylesheet href="css/base.css"/>
</head>
<body>

<script src="js/Three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/THREEx.KeyboardState.js"></script>
<script src="js/THREEx.FullScreen.js"></script>
<script src="js/THREEx.WindowResize.js"></script>
<script src="js/SubdivisionModifier.js"></script>
<!--业务js-->
<script src="js/other/solar/init.js"></script>
<script src="js/other/solar/planets.js"></script>
<script src="js/other/solar/solar_sys.js"></script>

<script src="js/other/solar/data.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

<div>
    <div id="ThreeJS" style="position: absolute; left:0px; top:0px; right: 20px" ></div>
    <p style="color: white;opacity: 0.8" id="p">
        Press P To ShotScreen
    </p>
</div>

<script>

  start();

  //启动Three.js
  function start() {
    initThree();

    initData();
    //添加星空
    scene.add(createSolarSky(20000, 64));
    //画太阳系
    drawSolarSystem();

    animate();
  }

  //循环渲染
  function animate(){
    render();
    update();

  }

  function update(){
//        updateSunFire();

    if ( keyboard.pressed("z") ) {
      // do something
    }
    controls.update();
    stats.update();
  }

  function render() {
    //更新天体的运动状态
    updatePlanetsMove();

    requestAnimationFrame(animate);
    renderer.render( scene, camera );

    if (keyboard.pressed('p')){
      shot()
    }

  }

  function clickCut () {
    renderer.render(scene, camera);
    let image = new Image();
    let imgData = renderer.domElement.toDataURL("image/jpeg");//这里可以选择png格式jpeg格式
    image.src = imgData;
    let a = document.createElement('a')
    a.setAttribute('href',imgData)
    a.setAttribute('download', "项目.jpg")
    a.click()
    a.remove();
  }
  const p = document.querySelector('#p')
  p.addEventListener('click',clickCut)

  function debugBase64(base64URL){
    let win = window.open();
    win.document.write('<image id="IframeReportImg" src="' + base64URL  + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen ></image>');
  }


  function downloadImage(imgUrl) {
    let a = $("<a></a>").attr("href", imgUrl).attr("download", "img.png").appendTo("body");
    a[0].click();
    a.remove();
  }

  function shot() {
    let image = new Image();
    // renderer.render(scene, camera);

    let imgData = renderer.domElement.toDataURL("image/jpeg");//这里可以选择png格式jpeg格式
    image.src = imgData;
    image.id = 'image';
    document.body.appendChild(image);
    // debugBase64(imgData);
    downloadImage(imgData);
  }

  function beforeScreen() {
    let canvas = renderer.domElement
    renderer.render(scene, camera)
    let imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    window.location.href = imgUri // 下载图片
  }

</script>

</body>
</html>

